<template>
  <div class="contain">
    <el-card style="margin: 20px">
      <el-page-header content="返回首页" @back="handelpush" />
      <el-divider />
      <el-form>
        <el-form-item label="字体设置:">
          <el-dropdown trigger="click" @command="changeLanguage">
            <div>
              <svg-icon
                class="svgop"
                style="color: #ccc; font-size: 40px"
                icon-class="language"
              />
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">
                中文
              </el-dropdown-item>
              <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">
                en
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="账户详情：">
          <el-radio-group v-model="direction">
            <!-- <el-radio label="rtl" /> -->
          </el-radio-group>
          <el-button
            style="margin-left: 16px"
            size="small"
            type="text"
            @click="drawer = true"
          >
            点击查看详情
          </el-button>
          <el-drawer
            title="用户详情"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
          >
            <el-form>
              <el-form-item label="用户名：">
                {{ $store.state.user.userInfo.name }}
              </el-form-item>
              <el-form-item label="部门：">
                {{ $store.state.user.userInfo.group }}
              </el-form-item>
              <el-form-item label="签名：">
                {{ $store.state.user.userInfo.signature }}
              </el-form-item>
              <el-form-item label="头像链接：">
                {{ $store.state.user.userInfo.avatar }}
              </el-form-item>
              <el-form-item label="权限：">
                {{ $store.state.user.userInfo.roles }}
              </el-form-item>
            </el-form>
          </el-drawer>
        </el-form-item>
        <el-form-item>
          <el-steps :active="1" simple>
            <el-step title="创建" icon="el-icon-edit" />
            <el-step title="渲染" icon="el-icon-upload" />
            <el-step title="结束" icon="el-icon-picture" />
          </el-steps>
        </el-form-item>
        <el-form-item label="">
          <el-steps
            :active="1"
            finish-status="success"
            simple
            style="margin-top: 20px"
          >
            <el-step title="步骤 1" />
            <el-step title="步骤 2" />
            <el-step title="步骤 3" />
          </el-steps>
        </el-form-item>
        <el-form-item label="折叠面板">
          <el-collapse accordion>
            <el-collapse-item title="一致性 Consistency" name="1">
              <div>
                与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
              </div>
              <div>
                在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
        <el-form-item label="项目进度">
          <el-timeline style="margin-top: 40px">
            <el-timeline-item
              color="blue"
              timestamp="2023/03/09"
              placement="top"
            >
              <el-card>
                <h4>项目创建</h4>
                <p>Ash 提交于 2023/03/09 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              color="orange"
              timestamp="2023/03/12"
              placement="top"
            >
              <el-card>
                <h4>项目渲染阶段</h4>
                <p>Ash 提交于 2023/03/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              color="green"
              timestamp="2023/03/14"
              placement="top"
            >
              <el-card>
                <h4>项目完善</h4>
                <p>Ash 提交于 2023/03/14 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
        <!-- 轮播图 -->
        <el-form-item>
          <el-carousel :interval="4000" type="card" height="500px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">
                <img :src="png1" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </el-form-item>

        <el-form-item label="回到顶部" style="text-align: right">
          <a href="#">
            Scroll down to see the bottom-right button 点击回到顶部</a
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import png1 from '@/assets/images/login.png'
export default {
  name: 'Settings',
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      png1
    }
  },
  methods: {
    changeLanguage(lang) {
      // lang: zh 或 en
      Cookies.set('language', lang) // 切换多语言,存储到cookie中
      this.$i18n.locale = lang // 设置给本地的i18n插件，切换语言，触发$t重新执行
      if (lang === 'zh') {
        this.$message.success('语言切换成功')
      } else {
        this.$message.success('Language switch succeeded')
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？', '温馨提示', {
        type: 'success'
      })
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handelpush() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  img {
    width: 100%;
    height: 500px;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-timeline-item {
  .el-card {
    width: 50%;
    height: 190px;
  }
}
.svgop {
  //   background-color: #de962b;
  width: 35px;
  font-size: 45px;
}
</style>
